<template>
  <div class="user-profile-container">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <button @click="$router.go(-1)" class="back-btn">
        <span>←</span> 返回
      </button>
    </div>

    <!-- 用户信息区域 -->
    <div class="user-hero">
      <div class="user-avatar-container">
        <img 
          v-if="userInfo.avatar" 
          :src="userInfo.avatar" 
          :alt="userInfo.username"
          @error="handleAvatarError"
          class="user-avatar"
        />
        <div v-else class="default-avatar" :style="{ background: getAvatarBackgroundColor() }">
          <span class="default-avatar-text">{{ getAvatarText() }}</span>
        </div>
      </div>
      
      <div class="user-info-container">
        <h1 class="user-name">{{ userInfo.username || '用户' + userId }}</h1>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ userStats.totalComments }}</span>
            <span class="stat-label">评论</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userStats.totalRatings }}</span>
            <span class="stat-label">评分</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userStats.watchedMovies }}</span>
            <span class="stat-label">已看</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userStats.wantToWatch }}</span>
            <span class="stat-label">想看</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容标签页 -->
    <div class="content-tabs">
      <div class="tab-container">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          @click="activeTab = tab.id"
          :class="['tab-btn', { active: activeTab === tab.id }]"
        >
          <span class="tab-icon">{{ tab.icon }}</span>
          <span class="tab-text">{{ tab.name }}</span>
          <span class="tab-count">({{ getTabCount(tab.id) }})</span>
        </button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 评论列表 -->
      <div v-if="activeTab === 'comments'" class="tab-content">
        <div v-if="userComments.length === 0" class="empty-state">
          <div class="empty-icon">💬</div>
          <div class="empty-text">还没有发表过评论</div>
        </div>
        
        <div v-else class="comments-list">
          <div v-for="comment in userComments" :key="comment.id" class="comment-card">
            <div class="comment-header">
              <div class="movie-info" @click="goToMovieDetail(comment.movieId)">
                <img 
                  v-if="getMovieById(comment.movieId)?.poster" 
                  :src="getMovieById(comment.movieId).poster" 
                  :alt="getMovieById(comment.movieId)?.title"
                  class="movie-poster"
                />
                <div class="movie-details">
                  <div class="movie-title">{{ getMovieById(comment.movieId)?.title || '未知电影' }}</div>
                  <div class="comment-date">{{ formatDate(comment.createdAt) }}</div>
                </div>
              </div>
              <div class="comment-rating" v-if="comment.userRating">
                <span class="rating-text">{{ comment.userRating }}分</span>
                <div class="rating-stars">
                  <span v-for="(star, index) in 5" :key="index"
                        :class="{ 
                          active: comment.userRating >= (index + 1) * 2, 
                          'half-active': comment.userRating >= (index * 2 + 1) && comment.userRating < (index + 1) * 2 
                        }">★</span>
                </div>
              </div>
            </div>
            
            <div class="comment-content">
              <p>{{ comment.content }}</p>
            </div>
            
            <div class="comment-footer">
              <button @click="toggleLike(comment)" class="like-btn" :class="{ active: comment.likedByUser }">
                <span class="like-icon">{{ comment.likedByUser ? '❤️' : '🤍' }}</span>
                <span class="like-count">{{ comment.useful || 0 }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 评分列表 -->
      <div v-else-if="activeTab === 'ratings'" class="tab-content">
        <div v-if="userRatings.length === 0" class="empty-state">
          <div class="empty-icon">⭐</div>
          <div class="empty-text">还没有评分记录</div>
        </div>
        
        <div v-else class="ratings-list">
          <div v-for="rating in userRatings" :key="rating.id" class="rating-card">
            <div class="movie-info" @click="goToMovieDetail(rating.movieId)">
              <img 
                v-if="getMovieById(rating.movieId)?.poster" 
                :src="getMovieById(rating.movieId).poster" 
                :alt="getMovieById(rating.movieId)?.title"
                class="movie-poster"
              />
              <div class="movie-details">
                <div class="movie-title">{{ getMovieById(rating.movieId)?.title || '未知电影' }}</div>
                <div class="rating-date">{{ formatDate(rating.createdAt) }}</div>
              </div>
            </div>
            
            <div class="rating-display">
              <div class="rating-score">
                <span class="score-number">{{ rating.score }}</span>
                <span class="score-label">/ 10分</span>
              </div>
              <div class="rating-stars">
                <span v-for="(star, index) in 5" :key="index"
                      :class="{ 
                        active: rating.score >= (index + 1) * 2, 
                        'half-active': rating.score >= (index * 2 + 1) && rating.score < (index + 1) * 2 
                      }">★</span>
              </div>
              <div class="rating-description">{{ getScoreDescription(rating.score) }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 已看电影列表 -->
      <div v-else-if="activeTab === 'watched'" class="tab-content">
        <div v-if="watchedMovies.length === 0" class="empty-state">
          <div class="empty-icon">✅</div>
          <div class="empty-text">还没有已看电影</div>
        </div>
        
        <div v-else class="movies-grid">
          <div v-for="movie in watchedMovies" :key="movie.id" class="movie-card" @click="goToMovieDetail(movie.id)">
            <div class="movie-poster-container">
              <img 
                v-if="movie.poster" 
                :src="movie.poster" 
                :alt="movie.title"
                class="movie-poster-img"
              />
              <div v-else class="movie-poster-placeholder">
                <span class="placeholder-icon">🎬</span>
              </div>
            </div>
            <div class="movie-info">
              <div class="movie-title">{{ movie.title }}</div>
              <div class="movie-meta">
                <span class="movie-year">{{ movie.releaseDate?.split('-')[0] || '未知' }}</span>
                <span class="movie-genre">{{ movie.genre || '未知类型' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 想看电影列表 -->
      <div v-else-if="activeTab === 'want'" class="tab-content">
        <div v-if="wantToWatchMovies.length === 0" class="empty-state">
          <div class="empty-icon">👀</div>
          <div class="empty-text">还没有想看的电影</div>
        </div>
        
        <div v-else class="movies-grid">
          <div v-for="movie in wantToWatchMovies" :key="movie.id" class="movie-card" @click="goToMovieDetail(movie.id)">
            <div class="movie-poster-container">
              <img 
                v-if="movie.poster" 
                :src="movie.poster" 
                :alt="movie.title"
                class="movie-poster-img"
              />
              <div v-else class="movie-poster-placeholder">
                <span class="placeholder-icon">🎬</span>
              </div>
            </div>
            <div class="movie-info">
              <div class="movie-title">{{ movie.title }}</div>
              <div class="movie-meta">
                <span class="movie-year">{{ movie.releaseDate?.split('-')[0] || '未知' }}</span>
                <span class="movie-genre">{{ movie.genre || '未知类型' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { processImageUrl } from '@/utils/imageUtils'
import { useAuthStore } from '@/store/authStore'
import userApi from '@/api/user/userApi.js'
import commentApi from '@/api/comment/commentApi.js'
import ratingApi from '@/api/rating/ratingApi.js'

const route = useRoute()
const router = useRouter()

// 响应式数据
const userId = ref(null)
const userInfo = ref({})
const userComments = ref([])
const userRatings = ref([])
const watchedMovies = ref([])
const wantToWatchMovies = ref([])
const allMovies = ref([])
const activeTab = ref('comments')
const userStats = ref({
  totalComments: 0,
  totalRatings: 0,
  watchedMovies: 0,
  wantToWatch: 0
})

// 标签页配置
const tabs = [
  { id: 'comments', name: '评论', icon: '💬' },
  { id: 'ratings', name: '评分', icon: '⭐' },
  { id: 'watched', name: '已看', icon: '✅' },
  { id: 'want', name: '想看', icon: '👀' }
]

// 计算属性
const getTabCount = (tabId) => {
  switch (tabId) {
    case 'comments': return userComments.value.length
    case 'ratings': return userRatings.value.length
    case 'watched': return watchedMovies.value.length
    case 'want': return wantToWatchMovies.value.length
    default: return 0
  }
}

// 组件挂载时初始化
onMounted(async () => {
  const routeUserId = route.params.id
  
  if (!routeUserId || isNaN(Number(routeUserId))) {
    router.push('/home')
    return
  }
  
  userId.value = Number(routeUserId)
  console.log('用户主页初始化，用户ID:', userId.value)

  try {
    await Promise.all([
      loadUserInfo(),
      loadUserComments(),
      loadUserRatings(),
      loadUserFavorites(),
      loadAllMovies()
    ])
  } catch (error) {
    console.error('加载用户数据失败:', error)
  }
})

// 加载用户基本信息
async function loadUserInfo() {
  try {
    const response = await userApi.getUserById(userId.value)
    userInfo.value = response.data
  } catch (error) {
    console.error('加载用户信息失败:', error)
  }
}

// 加载用户评论
async function loadUserComments() {
  try {
    // 获取当前登录用户ID
    const authStore = useAuthStore()
    const currentUserId = authStore?.user?.id || 2
    
    const response = await axios.get(`http://localhost:9527/commentss/user/${userId.value}`, {
      params: {
        currentUserId: currentUserId
      }
    })
    
    userComments.value = response.data.map(item => {
      const comment = item.comment
      comment.likedByUser = item.likedByUser || false
      return comment
    })
    
    userStats.value.totalComments = userComments.value.length
  } catch (error) {
    console.error('加载用户评论失败:', error)
  }
}

// 加载用户评分
async function loadUserRatings() {
  try {
    const response = await ratingApi.getUserRatings(userId.value)
    userRatings.value = response.data
    userStats.value.totalRatings = userRatings.value.length
  } catch (error) {
    console.error('加载用户评分失败:', error)
  }
}

// 加载用户收藏（想看/已看）
async function loadUserFavorites() {
  try {
    const response = await userApi.getUserFavorites(userId.value)
    const favorites = response.data
    
    // 分离想看和已看的电影
    const watched = favorites.filter(f => f.type === 2)
    const wantToWatch = favorites.filter(f => f.type === 1)
    
    userStats.value.watchedMovies = watched.length
    userStats.value.wantToWatch = wantToWatch.length
    
    // 获取电影详情
    await Promise.all([
      loadMovieDetails(watched, watchedMovies),
      loadMovieDetails(wantToWatch, wantToWatchMovies)
    ])
  } catch (error) {
    console.error('加载用户收藏失败:', error)
  }
}

// 加载电影详情
async function loadMovieDetails(favorites, targetArray) {
  const moviePromises = favorites.map(async (favorite) => {
    try {
      const response = await axios.get(`http://localhost:9527/movies/${favorite.movieId}`)
      let movie = response.data
      
      // 处理海报URL
      if (movie.poster && movie.poster.startsWith('http')) {
        movie.poster = processImageUrl(movie.poster)
      }
      
      return movie
    } catch (error) {
      console.error(`加载电影 ${favorite.movieId} 详情失败:`, error)
      return null
    }
  })
  
  const movies = await Promise.all(moviePromises)
  targetArray.value = movies.filter(movie => movie !== null)
}

// 加载所有电影（用于获取电影信息）
async function loadAllMovies() {
  try {
    const response = await axios.get('http://localhost:9527/movies')
    allMovies.value = response.data.map(movie => {
      if (movie.poster && movie.poster.startsWith('http')) {
        movie.poster = processImageUrl(movie.poster)
      }
      return movie
    })
  } catch (error) {
    console.error('加载电影列表失败:', error)
  }
}

// 根据ID获取电影信息
function getMovieById(movieId) {
  return allMovies.value.find(movie => movie.id === movieId)
}

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 获取评分描述
function getScoreDescription(score) {
  const descriptions = {
    1: '很差',
    2: '较差', 
    3: '不好',
    4: '一般',
    5: '还行',
    6: '不错',
    7: '很好',
    8: '非常好',
    9: '优秀',
    10: '完美'
  }
  return descriptions[score] || ''
}

// 跳转到电影详情
function goToMovieDetail(movieId) {
  router.push({
    path: `/movie/${movieId}`,
    query: { 
      from: 'user-profile',
      userId: route.params.id 
    }
  })
}

// 处理头像加载失败
function handleAvatarError(event) {
  event.target.style.display = 'none'
  const avatarContainer = event.target.parentElement
  const defaultAvatar = avatarContainer.querySelector('.default-avatar')
  if (defaultAvatar) {
    defaultAvatar.style.display = 'flex'
  }
}

// 获取头像文本
function getAvatarText() {
  if (userInfo.value?.username) {
    return userInfo.value.username.charAt(0).toUpperCase()
  }
  return '?'
}

// 获取头像背景色
function getAvatarBackgroundColor() {
  if (!userInfo.value?.username) {
    return 'linear-gradient(135deg, #a78bfa 0%, #ec4899 100%)'
  }
  
  const colors = [
    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
    'linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%)'
  ]
  
  let sum = 0
  for (let i = 0; i < userInfo.value.username.length; i++) {
    sum += userInfo.value.username.charCodeAt(i)
  }
  
  return colors[sum % colors.length]
}

// 点赞/取消点赞评论
async function toggleLike(comment) {
  try {
    const authStore = useAuthStore()
    const currentUserId = authStore?.user?.id || 2
    
    const response = await axios.post(`http://localhost:9527/commentss/${comment.id}/like`, {
      userId: currentUserId
    })
    
    const responseData = response.data
    comment.useful = responseData.useful
    comment.likedByUser = responseData.likedByUser
  } catch (error) {
    console.error('点赞失败:', error)
    alert('点赞失败，请重试')
  }
}
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.user-profile-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 顶部导航栏 */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.back-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(-2px);
}

/* 用户信息区域 */
.user-hero {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.user-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #667eea;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.default-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #667eea;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.default-avatar:hover {
  transform: scale(1.05);
}

.default-avatar-text {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-info-container {
  flex: 1;
}

.user-name {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.user-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 标签页 */
.content-tabs {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tab-container {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

.tab-btn.active {
  background: #667eea;
  color: white;
}

.tab-icon {
  font-size: 18px;
}

.tab-count {
  font-size: 12px;
  opacity: 0.8;
}

/* 内容区域 */
.content-area {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tab-content {
  padding: 40px;
  min-height: 400px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #999;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 18px;
}

/* 评论列表 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-card {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.comment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.movie-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s ease;
}

.movie-info:hover {
  transform: translateX(4px);
}

.movie-poster {
  width: 60px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
}

.movie-details {
  flex: 1;
}

.movie-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.comment-date, .rating-date {
  color: #999;
  font-size: 14px;
}

.comment-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-text {
  font-weight: 600;
  color: #ff6b35;
  font-size: 14px;
}

.rating-stars {
  display: flex;
  gap: 1px;
}

.rating-stars span {
  font-size: 12px;
  color: #ddd;
}

.rating-stars span.active {
  color: #ffd700;
}

.rating-stars span.half-active {
  background: linear-gradient(90deg, #ffd700 50%, #ddd 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.comment-content {
  margin-bottom: 16px;
}

.comment-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.like-btn:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
}

.like-btn.active {
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
}

.like-icon {
  font-size: 16px;
}

.like-count {
  font-size: 14px;
  font-weight: 500;
}

/* 评分列表 */
.ratings-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rating-card {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rating-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.rating-display {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rating-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-number {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b35;
}

.score-label {
  font-size: 14px;
  color: #666;
}

.rating-description {
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
  background: rgba(102, 126, 234, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
}

/* 电影网格 */
.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 25px;
}

.movie-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.movie-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.movie-poster-container {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.movie-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-card:hover .movie-poster-img {
  transform: scale(1.05);
}

.movie-poster-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48px;
}

.movie-info {
  padding: 20px;
}

.movie-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-hero {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    text-align: center;
  }
  
  .user-avatar, .default-avatar {
    width: 100px;
    height: 100px;
  }
  
  .user-name {
    font-size: 24px;
  }
  
  .user-stats {
    justify-content: center;
    gap: 20px;
  }
  
  .tab-container {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1 1 50%;
    padding: 16px;
    font-size: 14px;
  }
  
  .tab-content {
    padding: 20px;
  }
  
  .rating-card {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
}
</style> 